<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-07-19 09:42:10
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-26 11:03:37
 * @Description:
 *
-->

<template>
  <MyContainer class="distributed-deployment-container">
    <MyMain class="main">
      <!-- 顶部步骤条 -->
      <div class="steps">
        <!-- 微服务拆解 -->
        <div class="step-wrapper">
          <div :class="['order', currentStep === 1 ? 'active' : '']">1</div>
          <div class="content">
            <div :class="['title', , currentStep === 1 ? 'active' : '']">
              应用服务
            </div>
            <!-- <div :class="['detail', , currentStep === 1 ? 'active' : '']">
              将上传的应用自动拆分成微服务单元
            </div> -->
          </div>
        </div>
        <div class="step-division"></div>
        <!-- 添加调度策略 -->
        <div class="step-wrapper">
          <div :class="['order', currentStep === 2 ? 'active' : '']">2</div>
          <div class="content">
            <div :class="['title', , currentStep === 2 ? 'active' : '']">
              调度编排
            </div>
            <!-- <div :class="['detail', , currentStep === 2 ? 'active' : '']">
              基于业务需求及算网资源输出模型化调度策略
            </div> -->
          </div>
        </div>
        <div class="step-division"></div>
        <!-- 添加扩缩容策略 -->
        <div class="step-wrapper">
          <div :class="['order', currentStep === 3 ? 'active' : '']">3</div>
          <div class="content">
            <div :class="['title', , currentStep === 3 ? 'active' : '']">
              弹性扩缩
            </div>
            <!-- <div :class="['detail', , currentStep === 3 ? 'active' : '']">
              基于业务变化输出用户无感知扩缩容策略
            </div> -->
          </div>
        </div>
        <div class="step-division"></div>
        <!-- 分布式部署 -->
        <div class="step-wrapper">
          <div :class="['order', currentStep === 4 ? 'active' : '']">4</div>
          <div class="content">
            <div :class="['title', , currentStep === 4 ? 'active' : '']">
              一键式部署
            </div>
            <!-- <div :class="['detail', , currentStep === 4 ? 'active' : '']">
              下发并执行编排策略
            </div> -->
          </div>
        </div>
      </div>
      <div class="divider"></div>
      <div id="step-main" class="step-content">
        <!-- 微服务拆解组件 -->
        <ServiceSplit
          v-show="currentStep === 1"
          :micro-services.sync="microServices"
          @next-step="nextStep"
          @goto-step="gotoStep"
        />
        <!-- 添加调度策略组件 -->
        <ScheduleStrategy
          v-if="currentStep === 2"
          :micro-services.sync="microServices"
          @previous-step="previousStep"
          @next-step="nextStep"
          @refreshMicroService="getAppMicroServiceInfo"
        />
        <!-- 添加扩缩容策略组件 -->
        <ScaleStrategy
          v-if="currentStep === 3"
          :micro-services.sync="microServices"
          @previous-step="previousStep"
          @next-step="nextStep"
          @refreshMicroService="getAppMicroServiceInfo"
        />
        <!-- 分布式部署组件 -->
        <Deployment
          v-if="currentStep === 4"
          :micro-services.sync="microServices"
          @previous-step="previousStep"
          @refreshMicroService="getAppMicroServiceInfo"
        />
      </div>
    </MyMain>
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import ServiceSplit from './components/ServiceSplit.vue'
import ScheduleStrategy from './components/ScheduleStrategy.vue'
import ScaleStrategy from './components/ScaleStrategy.vue'
import Deployment from './components/DeploymentV2.vue'
import { getAppMicroService } from '@/api/cnap/app-service'

export default {
  name: 'DistributedDeployment',
  components: {
    MyContainer,
    MyMain,
    ServiceSplit,
    ScheduleStrategy,
    ScaleStrategy,
    Deployment
  },
  data() {
    return {
      currentStep: 1, // 当前步骤
      currentAppId: '', // 当前appid
      microServices: [] // 微服务列表
    }
  },
  methods: {
    /**
     *
     * @description: 跳转到当前状态 回调
     * @param {*} val
     * @return {*}
     *
     */
    gotoStep(val) {
      this.currentAppId = val.appId
      this.currentStep = val.step
    },
    /**
     *
     * @description: 上一步
     * @return {*}
     *
     */
    previousStep() {
      this.currentStep-- // 上一步
    },
    /**
     *
     * @description: 下一步
     * @param {*} val
     * @return {*}
     *
     */
    nextStep(val) {
      if (this.currentStep === 1) {
        this.currentAppId = val.appId
      }
      this.currentStep++ // 下一步
    },
    /**
     *
     * @description: 查询应用对应的微服务信息
     * @return {*}
     *
     */
    getAppMicroServiceInfo() {
      // 发起请求
      getAppMicroService(this.currentAppId).then((res) => {
        this.microServices = Array.isArray(res.data) ? res.data : []
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.distributed-deployment-container {
  .main {
    box-sizing: border-box;
    min-height: calc(100vh - 90px);
    border-radius: 4px;
    padding: 5px 20px 20px;

    .steps {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;

      .step-division {
        width: 12%;
        height: 1px;
        background: #d8d8d8;
        margin: 0 10px;
      }

      .step-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;

        .order {
          width: 18px;
          height: 18px;
          background: #ffffff;
          text-align: center;
          border: 1px solid #c3c3c3;
          border-radius: 50%;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          .textStyle(12px, 400, #C3C3C3);

          &.active {
            background: #0091ff;
            border: none;
            color: #ffffff;
          }
        }

        .content {
          margin-left: 8px;
          display: flex;
          flex-direction: column;

          .title {
            .textStyle(14px, 500, #B9B9B9);
            line-height: 20px;
            &.active {
              color: #262626;
            }
          }
          .detail {
            margin-top: 2px;
            .textStyle(12px, 400, #C3C3C3);
            line-height: 17px;
            &.active {
              color: #696969;
            }
          }
        }
      }
    }

    .divider {
      height: 1px;
      background-color: #f2f2f2;
    }

    .step-content {
      margin-top: 25px;
    }
  }
}
</style>
